<script lang="ts" setup>
import { Page } from '@vben/common-ui';

import { Card, TabPane, Tabs } from 'ant-design-vue';

import { ScrollContainer } from '#/components/container';

import BaseSetting from './modules/base-setting.vue';
import LoginLog from './modules/login-log.vue';
import SecureSetting from './modules/secure-setting.vue';

const prefixCls = 'account-setting';

const settingList = [
  {
    key: '1',
    name: '基本设置',
    component: BaseSetting,
  },
  {
    key: '2',
    name: '安全设置',
    component: SecureSetting,
  },
  {
    key: '3',
    name: '登录日志',
    component: LoginLog,
  },
];
</script>
<template>
  <Page auto-content-height>
    <ScrollContainer>
      <div :class="prefixCls">
        <Tabs
          tab-position="left"
          :tab-bar-style="{
            width: '220px',
          }"
        >
          <template v-for="item in settingList" :key="item.key">
            <TabPane :tab="item.name">
              <Card :bordered="false" :title="item.name">
                <component :is="item.component" />
              </Card>
            </TabPane>
          </template>
        </Tabs>
      </div>
    </ScrollContainer>
  </Page>
</template>
<style lang="scss" scoped>
.account-setting {
  background-color: hsl(var(--background));
}

::v-deep(
  .ant-tabs-left
    > .ant-tabs-content-holder
    > .ant-tabs-content
    > .ant-tabs-tabpane
) {
  padding-left: 0;
}
</style>
